<template>
    <el-dialog title="查看账号" :visible.sync="dialogVisible" v-if="dialogVisible" top="200px" width="960px">
        <div v-if="goodsInfo">
            <el-descriptions title="账号信息" :labelStyle="{ width: '110px' }" :column="3" border>
                <el-descriptions-item label="游戏账号">{{ goodsInfo.account }}</el-descriptions-item>
                <el-descriptions-item label="游戏名称">{{ goodsInfo.gameName }}</el-descriptions-item>
                <el-descriptions-item label="区服">
                     {{ goodsInfo.systemName}}
                        <span v-if="goodsInfo.systemName">/</span>
                        {{ goodsInfo.carrierName}}
                        <span v-if="goodsInfo.carrierName">/</span>
                        {{ goodsInfo.groupName }}
                         <span v-if="goodsInfo.groupName">/</span>
                        {{ goodsInfo.serverName }}
                  
                </el-descriptions-item>
                <el-descriptions-item label="状态">
                    <el-tag :type="statusMap[goodsInfo.rentState] ? statusMap[goodsInfo.rentState].type : ''">
                        {{ statusMap[goodsInfo.rentState] ? statusMap[goodsInfo.rentState].name : '' }}</el-tag>
                </el-descriptions-item>
             
                <el-descriptions-item label="自编号">
                    {{ goodsInfo.selfNumber }}
                </el-descriptions-item>
                <el-descriptions-item label="是否自营">
                    <el-tag type="success" v-if="goodsInfo.goodsType == 1">是</el-tag>
                    <el-tag type="danger" v-if="goodsInfo.goodsType == 2">否</el-tag>
                </el-descriptions-item>

                <el-descriptions-item label="时租">
                    <span style="color: red;">¥{{ goodsInfo.price }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="日租(24小时)">
                    <span style="color: red;">¥{{ goodsInfo.priceDay }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="周租(168小时)">
                    <span style="color: red;">¥{{ goodsInfo.priceWeek }}</span>
                </el-descriptions-item>

                <el-descriptions-item label="是否有预付款">

                    <el-tag type="success" v-if="goodsInfo.isSub == 1">是</el-tag>
                    <el-tag type="danger" v-if="goodsInfo.isSub == 2">否</el-tag>
                </el-descriptions-item>
                <el-descriptions-item v-if="goodsInfo.isSub == 1" label="预付款金额">
                    <span style="color: red;">¥{{ goodsInfo.priceSub }}</span>
                   
                </el-descriptions-item>
                 <el-descriptions-item  label="下架原因" v-if="goodsInfo.downDes">
                    {{ goodsInfo.downDes }}
                </el-descriptions-item>
                 <el-descriptions-item  label="下架时间" v-if="goodsInfo.downTime">
                    {{ goodsInfo.downTime }}
                </el-descriptions-item>
                 <el-descriptions-item  label="审核拒绝" v-if="goodsInfo.failReason">
                    {{ goodsInfo.failReason }}
                </el-descriptions-item>
                <el-descriptions-item label="其他信息">
                    {{ goodsInfo.otherInfo }}
                </el-descriptions-item>
                <el-descriptions-item label="商品描述" :span="3">
                    <div style="max-height: 200px;overflow-y: auto;white-space: pre-wrap;">{{ goodsInfo.des }}</div>
                </el-descriptions-item>
                <el-descriptions-item label="商品标题" :span="3">
                    <div style="max-height: 200px;overflow-y: auto;white-space: pre-wrap;">{{ goodsInfo.title }}</div>
                </el-descriptions-item>

                <el-descriptions-item label="主图" :span="3">
                    <div class="img-box flex">
                        <div v-for="(item, ind) in titleList" :key="item">
                            <img :src="item" @click="review(titleList, ind)" />
                        </div>
                    </div>
                </el-descriptions-item>

                <el-descriptions-item label="详情图片" :span="3">
                    <div class="img-box flex">
                        <div v-for="(item, ind) in desImglist" :key="item">
                            <img :src="item" @click="review(desImglist, ind)" />
                        </div>
                    </div>
                </el-descriptions-item>
            </el-descriptions>
        </div>
        <div class="center" style="margin-top: 15px;">
            <el-button plain type="primary" @click="dialogVisible = false">关闭</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { rentalDetail } from "@/api/rental/account";
export default {
    name: "",
    data() {
        return {
            dialogVisible: false,
            loading: false,
            goodsInfo: null,
            telInfo: {},
            desImglist: [],
            titleList: [],

            statusMap: {
                1: {
                    name: "待审核",
                    type: "warning",
                },
                2: {
                    name: "已上架",
                    type: "success",
                },
                3: {
                    name: "出租中",
                    type: "warning",
                },
                4: {
                    name: "已下架",
                    type: "danger",
                },
                5: {
                    name: "审核不通过",
                    type: "danger",
                },
            },

        };
    },
    created() { },
    methods: {
        open(row) {
            this.desImglist = []
            this.loading = true;
            rentalDetail(row.id).then((res) => {
                this.goodsInfo = res.data
                this.loading = false
                if (res.data.titleImg) {
                    this.titleList = [res.data.titleImg]
                }
                if (res.data.urlArr) {
                    res.data.urlArr.forEach(item => {
                        if (item.url) {
                            this.desImglist.push(item.url)
                        }
                    });
                }
            }).finally(() => {
                  this.dialogVisible = true;
});
          
        },

        review(list, ind) {
            this.$viewerApi({
                images: list,
                options: {
                    initialViewIndex: ind,
                },
            });
        },


        close() {
            this.dialogVisible = false;
        },
    },
};
</script>
<style scoped lang="scss">
.img-box {
    flex-wrap: wrap;

    img {
        width: 100px;
        margin-right: 10px;
        margin-bottom: 10px;
        cursor: pointer;
    }
}
</style>
